<template>
  <view class="bottom-nav">
    <view 
      class="nav-item" 
      :class="{ active: currentPage === 'home' }" 
      @tap="switchTab('home')"
    >
      <view class="nav-icon-container">
        <!-- <view class="nav-icon home-icon"></view> -->
        <image src="/static/tabbar/menu-a.png" v-if="currentPage === 'home'" class="nav-icon" mode="aspectFill"></image>
        <image src="/static/tabbar/menu.png" v-else class="nav-icon" mode="aspectFill"></image>
   
      </view>
      <text class="nav-text">首页</text>
    </view>
    
    <view 
      class="nav-item" 
      :class="{ active: currentPage === 'posts' }" 
      @tap="switchTab('posts')"
    >
      <view class="nav-icon-container">
        <!-- <view class="nav-icon posts-icon"></view> -->
        <image src="/static/tabbar/info-a.png" v-if="currentPage === 'posts'" class="nav-icon" mode="aspectFill"></image>
        <image src="/static/tabbar/info.png" v-else class="nav-icon" mode="aspectFill"></image>

      </view>
      <text class="nav-text">帖子</text>
    </view>
    
    <view class="nav-item add-btn" @tap="createPost()">
      <!-- <view class="add-circle">
        <text class="add-icon">+</text>
      </view> -->
      <image src="/static/tabbar/add.png" class="add-icon" mode="aspectFill"></image>
    </view>
    
    <view 
      class="nav-item" 
      :class="{ active: currentPage === 'messages' }" 
      @tap="switchTab('messages')"
    >
      <view class="nav-icon-container">
        <!-- <view class="nav-icon messages-icon"></view> -->
        <image src="/static/tabbar/message-a.png" v-if="currentPage === 'messages'" class="nav-icon" mode="aspectFill"></image>
        <image src="/static/tabbar/message.png" v-else class="nav-icon" mode="aspectFill"></image>
      </view>
      <text class="nav-text">消息</text>
    </view>
    
    <view 
      class="nav-item" 
      :class="{ active: currentPage === 'profile' }" 
      @tap="switchTab('profile')"
    >
      <view class="nav-icon-container">
        <!-- <view class="nav-icon profile-icon"></view> -->
        <image src="/static/tabbar/user-a.png" v-if="currentPage === 'profile'" class="nav-icon" mode="aspectFill"></image>
        <image src="/static/tabbar/user.png" v-else class="nav-icon" mode="aspectFill"></image>
      </view>
      <text class="nav-text">我的</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BottomNav',
  props: {
    currentPage: {
      type: String,
      default: 'home'
    }
  },
  methods: {
    switchTab(tab) {
      if (tab === this.currentPage) return; // 如果是当前页面，不做任何操作
      
      let url = '';
      switch (tab) {
        case 'home':
          url = '/pages/index/index';
          break;
        case 'posts':
          url = '/pages/posts/posts';
          break;
        case 'messages':
          url = '/pages/messages/messages';
          break;
        case 'profile':
          url = '/pages/profile/profile';
          break;
      }
      
      if (url) {
        uni.switchTab({
          url: url
        });
      }
    },
    createPost() {
      // 创建帖子逻辑 - 可以导航到创建帖子页面
      console.log('Create new post');
      uni.navigateTo({
        url: '/pages/create-post/create-post'
      });
    }
  }
}
</script>

<style scoped>
/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #fff;
  display: flex;
  align-items: center;
  border-top: 1rpx solid #f0f0f0;
  z-index: 100;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-item.active .nav-text {
  color: #092B83;
}

.nav-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}

.nav-icon {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44rpx;
  color: #999;
}

/* 首页图标 */
.home-icon::before {
  content: "🏠";
}

/* 帖子图标 */
.posts-icon::before {
  content: "📄";
}

/* 消息图标 */
.messages-icon::before {
  content: "🔔";
}

/* 我的图标 */
.profile-icon::before {
  content: "👤";
}

.nav-item.active .nav-icon {
  color: #007aff;
}

.nav-text {
  font-size: 24rpx;
  color: #484C52;
}

.add-btn {
  position: relative;
  margin-top: -16rpx;
}

.add-circle {
  width: 72rpx;
  height: 72rpx;
  background: #ffd700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
 border: 4rpx solid #000000;
 line-height: 72rpx;
}

.add-icon {
 width: 80rpx;
 height: 80rpx;
}
</style>
